<template>
  <div>
    <div class="searchDiv">
      <div class="title">
        App 位置信息 {{timeLimit}}
      </div>
      <div id="container"></div>
    </div>
    <div class="infoWindow" ref="infoWindow" v-html="infoWindowContent"></div>
  </div>
</template>

<script>
import loadingTem from "../../mainComponents/loading/index.vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { parseTime } from '@/utils/index'
import GPS from '@/utils/GPS'
import axios from 'axios'
import L from "leaflet";
import "leaflet/dist/leaflet.css"
export default {
  name: "allSearch",
  props:['tableDataInfo','timeLimit'],
  components: {
    loadingTem,
  },
  data() {
    return {
      layerGroup:null,
      center:[38.044833,114.482256],
      map: null,
      infoWindowContent:'',
      imgPath:'',
      infoWindow:'',
      labelMarkerArr:[],
      lineList:[],
      linePosition:[],
      linePosition2:[],
      lineObj:[],
      mapDadta: [
          {
              appName:'抖音',
              dateTime:'2022-05-12 14:22 - 2022-05-12 14:52',
              action:4,
              type:'position',
              position:[114.458009,38.035681]
          },
          {
              appName:'高德地图',
              dateTime:'2022-05-12 14:22 - 2022-05-12 14:52',
              action:4,
              type:'line',
              linePosition:[]
          },
      ],
    };
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    // this.initMap();
  },
  mounted: function() {
    this.initMap();

    setTimeout(()=>{
    if (location.href.indexOf("#reloaded")<=0) {
      location.href = location.href + "#reloaded"+"#reloaded";
      location.reload();
    }
    },100)

  },
  created() {
  },
  methods: {
    formateDate(date){
      return parseTime(date)
    },
        // 绘制轨迹
        toDrawLine(list,color) {
          this.map.remove(this.lineList)
          let arrPath=[]
          if(list[0].DateTimeDigitized){
             list.forEach(element=>{
            const mark=GPS.gcj_encrypt(Number(element.latitude),Number(element.longitude))
              let item=[mark.lon,mark.lat];
              arrPath.push(item)
            })
          }else{
            list.forEach(element=>{
              let item=[element.longitude,element.latitude];
              arrPath.push(item)
            })
          }

         let path=arrPath
        
        // 添加定时器动态生成目标轨迹
        let _this=this;
        let activeLine=[];
        let index=2;
            activeLine.push(path[0]);
            activeLine.push(path[1]);
        this.lineList=[]
        let number=0
      let activeLineTimer = setInterval(()=>{
            number++
            // 当前轨迹节点小于总节点数
            if(index<=path.length){
                activeLine.push(path[index]);
                index++
            }else{
              // 当前轨迹节点全部渲染完毕后 还原节点数
                clearInterval(activeLineTimer)
                index=2
            }
      })
        },
    initMap() {
      let that=this

      let map = L.map("container", {
                      minZoom: 3,
                      maxZoom: 15,
                      center: that.center,
                      zoom: 15,
                      zoomDelta: 0.5,
                      fullscreenControl: false,
                      zoomControl: false,
                      attributionControl: false
                    });
            this.map = map;
            //http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}//arcgis在线地图
            this.baseLayer=L.tileLayer("https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",{
                    attribution: '&copy; 高德地图',
                    maxZoom: 15,
                    minZoom: 3,
                    subdomains: "1234",
                    // removeOutsideVisibleBounds:true
                });
            this.map.addLayer(this.baseLayer);
            this.initMarker()
    },
initMarker(){
      let _this=this
          // 创建海量标记点
          var icon = {
                // 图标类型，现阶段只支持 image 类型
                type: 'image',
                // 图片 url
                image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                // 图片尺寸
                size: [30, 40],
                // 图片相对 position 的锚点，默认为 bottom-center
                anchor: 'center',
                offset: [0, -5],
            };
            this.labelMarkerArr=[]
            var myIcon = L.icon({
              iconUrl: require('../../../assets/po.png'),
              iconSize: [30, 30],
            });
            const layers = [];
            this.tableDataInfo.forEach((element,index)=>{
              try{
                if(element.addr){
                    var text = {
                        // 要展示的文字内容
                        content: element.addr+'时间：'+this.formateDate(element.time),
                        // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
                        direction: 'right',
                        // 在 direction 基础上的偏移量
                        offset: [0, -15],
                        // 文字样式
                        style: {
                            // 字体大小
                            fontSize: 12,
                            // 字体颜色
                            fillColor: '#22886f',
                            // 描边颜色
                            strokeColor: '#fff',
                            // 描边宽度
                            strokeWidth: 2,
                        }
                    };
                }else if(element.DateTime){
                  text = {
                    // 要展示的文字内容
                    content: '时间：'+element.DateTime,
                    // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
                    direction: 'right',
                    // 在 direction 基础上的偏移量
                    offset: [0, -15],
                    // 文字样式
                    style: {
                        // 字体大小
                        fontSize: 12,
                        // 字体颜色
                        fillColor: '#22886f',
                        // 描边颜色
                        strokeColor: '#fff',
                        // 描边宽度
                        strokeWidth: 2,
                    }
                };
                }else{
                  text = {
                    // 要展示的文字内容
                    content: '未知',
                    // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
                    direction: 'right',
                    // 在 direction 基础上的偏移量
                    offset: [0, -15],
                    // 文字样式
                    style: {
                        // 字体大小
                        fontSize: 12,
                        // 字体颜色
                        fillColor: '#22886f',
                        // 描边颜色
                        strokeColor: '#fff',
                        // 描边宽度
                        strokeWidth: 2,
                    }
                };
                }
              }catch{
                  text = {
                    // 要展示的文字内容
                    content: '拍照地点',
                    // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
                    direction: 'right',
                    // 在 direction 基础上的偏移量
                    offset: [0, -15],
                    // 文字样式
                    style: {
                        // 字体大小
                        fontSize: 12,
                        // 字体颜色
                        fillColor: '#22886f',
                        // 描边颜色
                        strokeColor: '#fff',
                        // 描边宽度
                        strokeWidth: 2,
                    }
                };
              }


              if(element.DateTimeDigitized){
              const mark1=GPS.gcj_encrypt(Number(element.latitude),Number(element.longitude))
              var index = L.marker([mark1.lat,mark1.lon], {
                                    icon: myIcon
                                  }).addTo(_this.map)
                                  index.bindPopup(text.content+'<br>'+'照片路径：'+element.path);
              }
              else{
                const mark2=GPS.gcj_encrypt(Number(element.latitude),Number(element.longitude))
                var index = L.marker([mark2.lat,mark2.lon], {
                                    icon: myIcon
                                  }).addTo(_this.map)
                                  index.bindPopup(text.content);
              }
            // 给 labelMarker 添加点击事件
            layers.push(index);
            })
            this.layerGroup = L.layerGroup(layers);
            this.map.addLayer(this.layerGroup);
},
    //  设置地图中心/级别
    setMpaCenter(zoom,poistion){
      if(this.layerGroup !== null){
          this.layerGroup.clearLayers();
      }
      this.center = [poistion[1],poistion[0]];
      this.map.panTo(new L.LatLng(poistion[1], poistion[0]));
    },
    // 随机轨迹路径颜色
    randomRgb(item) {
        var str = '#';
        function getRandom() {
            return Math.floor(Math.random() * 16).toString(16);
        }
        for (let i = 0; i < 6; i++) {
           let n = getRandom();
            str += n;
        }
        return str
    }, 
  },
};
</script>
<style>
.amap-ctrl-overlay-layer,
.amap-ui-ctrl-layer-overlay-item {
  display: none !important;
}
.leaflet-popup-content{
  width: 700px !important;
  font-size: 15px !important;
}
</style>
<style scoped>

.infoWindow{
}
.searchDiv {
  width: 99%;
  min-height: 485px;
  margin: 0 auto;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  padding: 20px;
}
.title {
  height: 40px;
  font-size: 20px;
  font-weight: bold;
}
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 600px;
}
/* 当屏幕宽度大于2560时 */
@media screen and (min-width: 2360px) {
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
}

</style>